<template>
  <div
    class="WorkingSchedule"
    v-loading="loading"
    element-loading-text="拼命加载中"
  >
    <el-form
      size="mini"
      ref="form"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="款号" class="myform-item">
          <el-input
            v-model="form.type_no"
            placeholder="请输入款号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 39px">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="onBatchProportion"
            >批量平台比例</el-button
          >
          <el-button
            type="primary"
            @click="anticipateddialogVisibleBatch = true"
            >批量预计到货期</el-button
          >
        </el-form-item>
      </div>
      <div></div>
    </el-form>
    <div class="date">
      <div class="date-left">
        <div class="date-left-time">
          <div class="date-left-time-button pointer" @click="onUpdateTime(1)">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div class="date-left-time-list">
            <div
              :class="form.batch_date == item.batch_date ? 'borderSelect' : ''"
              class="pointer"
              v-for="item in datelist"
              :key="item.id"
              @click="onBatchDate(item.batch_date)"
            >
              {{ item.batch_date }}
            </div>
          </div>

          <div class="date-left-time-button pointer" @click="onUpdateTime(0)">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <span style="margin-left: 30px">最后更新日期：{{ savetime }}</span>
      </div>
      <div style="margin: 0 0 20px; display: flex; align-items: center">
        <!-- <download-excel
        class="export-excel-wrapper"
        :data="json_data"
        :fields="json_fields"
        :before-generate="startDownload"
        title="库存分配"
        name="库存分配.xls"
      >
        <el-button size="mini" type="primary">导出EXCEL</el-button>
      </download-excel> -->
        <!-- <div class="searchleft">
          <el-select
            class="sel"
            v-model="batch_date"
            placeholder="请选择"
            size="mini"
          >
            <el-option label="全部数据" value=""> </el-option>
            <el-option
              v-for="item in datelist"
              :key="item.id"
              :label="item.batch_date"
              :value="item.batch_date"
            >
            </el-option>
          </el-select>
          <div
            type="primary"
            @click="onExcel"
            class="searchleft-button pointer"
          >
            <i class="el-icon-download"></i>导出
          </div>
        </div> -->
        <el-button style="margin-left: 10px" size="mini" @click="onExcel"
          >生成导出数据</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="mini"
          type="primary"
          @click="onUpdate"
          >更新库存</el-button
        >
      </div>
    </div>

    <el-table
      ref="mytable"
      size="mini"
      :data="tableData"
      style="width: 100%"
      border
    >
      <el-table-column
        label="款号"
        align="center"
        prop="type_no"
      ></el-table-column>
      <el-table-column
        label="SKU"
        align="center"
        prop="product_code"
      ></el-table-column>
      <el-table-column
        label="款名"
        align="center"
        prop="product_name"
      ></el-table-column>
      <!-- <el-table-column label="颜色规格" align="center" prop="a_color"></el-table-column>
      <el-table-column label="部件名称" align="center" prop="a_specifications"></el-table-column>-->
      <el-table-column
        label="部件"
        align="center"
        prop="a_parts"
      ></el-table-column>
      <!-- <el-table-column label="尺码" align="center" prop="a_size"></el-table-column> -->
      <el-table-column label="图片" align="center" prop="img" width="150">
        <template slot-scope="{ row }">
          <el-image
            :src="row.img"
            v-if="row.img"
            fit="fill"
            :preview-src-list="[row.img]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="淘宝本批(总预售)/现货" align="center" prop="tb">
        <template slot-scope="{ row }">
          <div>
            <span style="color: #ffca42; font-size: 16px">{{
              row.tb.batch_yushou
            }}</span>
            <span style="color: #999">({{ row.tb.yushou }})</span>/
            <span style="color: #71d5a1; font-size: 16px">{{
              row.tb.xianhu
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="天猫（预售/现货）" align="center" prop="tm">
        <template slot-scope="{ row }">
          <div>
            <span style="color: #ffca42; font-size: 16px">{{
              row.tm.batch_yushou
            }}</span>
            <span style="color: #999">({{ row.tm.yushou }})</span>/
            <span style="color: #71d5a1; font-size: 16px">{{
              row.tm.xianhu
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="抖音（预售/现货）" align="center" prop="dy">
        <template slot-scope="{ row }">
          <div>
            <span style="color: #ffca42; font-size: 16px">{{
              row.dy.yushou
            }}</span>
            <span style="color: #999">({{ row.dy.yushou }})</span>/
            <span style="color: #71d5a1; font-size: 16px">{{
              row.dy.xianhu
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报次数" align="center" prop="bao_number">
      </el-table-column>
      <el-table-column label="留存" align="center" prop="liu">
        <template slot-scope="{ row }">
          <div>{{ row.liu.yuliu }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="测试可销数" align="center" prop="kx_num">
        <template slot-scope="{ row }">
          <div>{{ row.kx_num || 0 }}</div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="总数"
        align="center"
        prop="count"
      ></el-table-column>
      <el-table-column label="预售总数/现货总数" align="center" prop="xianhu">
        <template slot-scope="{ row }">
          {{ row.yushou || 0 }}/{{ row.xianhu || 0 }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="加工单数"
        align="center"
        prop="amount"
      ></el-table-column> -->
      <el-table-column
        label="预计到货日期"
        align="center"
        prop="arrivaldate"
      ></el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="kx_updatetime"
      ></el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" size="default" @click="onAudit(row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>-->
    </el-table>
    <paginationtwenty
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminOperateGetamountdata"
    />
    <!-- 审核 -->
    <el-dialog
      title="编辑比例"
      :visible.sync="auditdialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <div>
        <div>款号：{{ detail.type_no }}</div>
        <div style="margin-top: 20px">SKU：{{ detail.product_code }}</div>
        <div style="margin-top: 20px">款名：{{ detail.product_name }}</div>
        <div>
          <div
            v-for="(item, index) in detaillist"
            :key="index"
            style="margin-top: 20px"
          >
            {{ item.title }}（%）
            <el-input
              v-model="item.proportion"
              type="number"
              :min="1"
              :max="100"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量平台比例 -->
    <el-dialog
      title="批量平台比例"
      :visible.sync="auditdialogVisibleBatch"
      :close-on-click-modal="false"
      :before-close="handleClose"
      width="30%"
    >
      <div>
        <div style="display: flex; align-items: center">
          款号：
          <el-input
            v-model="type_no"
            placeholder="请输入款号"
            @change="onChangeTypeNo"
            style="width: 220px"
          ></el-input>
        </div>
        <div
          v-if="detaillist.length"
          style="display: flex; align-items: center; flex-wrap: wrap"
        >
          <div
            v-for="(item, index) in detaillist"
            :key="index"
            style="margin-top: 20px"
          >
            {{ item.title }}（%）
            <el-input
              v-model="item.proportion"
              type="number"
              :min="1"
              :max="100"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditdialogVisibleBatch = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitBatch" :disabled="isSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 批量预计到货期 -->
    <el-dialog
      title="批量预计到货期"
      :visible.sync="anticipateddialogVisibleBatch"
      :close-on-click-modal="false"
      width="30%"
    >
      <div>
        <div style="display: flex; align-items: center">
          款号：
          <el-input
            v-model="type_no"
            placeholder="请输入款号"
            style="width: 220px"
          ></el-input>
        </div>
        <div style="margin-top: 20px">
          请选择日期：
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="anticipateddialogVisibleBatch = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="onSubmitBatchAnticipated"
          :disabled="!type_no"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateGetamountdata,
  postAdminOperateSetskuproportion,
  postAdminOperateGetskuproportion,
  postAdminOperateSet_amount_data,
  postAdminAdminOperateGet_platform_site,
  postAdminAdminOperateVerificationTypeno,
  postAdminAdminOperateSetArrivalDate,
  postAdminOperateSet_type_proportion,
  postAdminExcelGetStockexport,
  postAdminOperateGet_lately_batch,
  postAdminExcelCreate_excel_task,
} from "@/api";
import pagination from "@/components/pagination.vue";
import paginationtwenty from "@/components/paginationtwenty.vue";

export default {
  components: { pagination, paginationtwenty },
  data() {
    return {
      browserHeight: "",
      isSubmit: true,
      loading: false,
      auditdialogVisible: false, // 审核
      auditdialogVisibleBatch: false, // 批量平台比例
      anticipateddialogVisibleBatch: false, // 批量预计到货期
      height: `${document.documentElement.clientHeight - 400}`,
      savetime: "",
      batch_date: "",
      batch_datePage: {
        slide: 0,
        page: 1,
      },
      type_no: "", // 款号
      date: "", // 日期
      form: {
        batch_date: "",
        type_no: "",
        page: 1,
        size: 20,
      },
      tableData: [],
      total: 1,
      detail: "",
      detaillist: [],
      json_data: [],
      json_fields: {
        款号: "type_no",
        SKU: "product_code",
        款名: "product_name",
        // "颜色规格": "a_color",
        // "部件名称": "a_specifications",
        部件: "a_parts",
        尺码: "a_size",
        图片: "img",
        淘宝预售: "tb.yushou",
        淘宝现货: "tb.xianhu",
        天猫预售: "tm.yushou",
        天猫现货: "tm.xianhu",
        抖音预售: "dy.yushou",
        抖音现货: "dy.xianhu",
        留存: "liu.yuliu",
        总数: "count",
        预计到货日期: "arrivaldate",
      },
    };
  },
  async activated() {
    let browserHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.browserHeight = browserHeight - 290;
    await this.postAdminOperateGet_lately_batch();

    // this.postAdminAdminOperateGet_platform_site()
  },
  methods: {
    onBatchDate(e) {
      this.form.batch_date = e;
      this.form.page = 1;
      let form = this.form;
      this.postAdminOperateGetamountdata(form);
    },
    onUpdateTime(e) {
      let { batch_datePage } = this;
      if (batch_datePage.slide == e) {
        batch_datePage.page = batch_datePage.page + 1;
        this.postAdminOperateGet_lately_batch();
      } else if (batch_datePage.page > 1) {
        batch_datePage.page = batch_datePage.page - 1;
        this.postAdminOperateGet_lately_batch();
      } else {
        batch_datePage.slide = e;
        this.postAdminOperateGet_lately_batch();
      }
    },
    async postAdminOperateGet_lately_batch() {
      let res = await postAdminOperateGet_lately_batch(this.batch_datePage);
      let date = res.date;
      if (this.batch_datePage.slide == 1) {
        date.reverse();
      }
      this.form.batch_date = date[0].batch_date;
      this.datelist = res.date;
      let form = this.form;
      this.postAdminOperateGetamountdata(form);
    },
    async onExcel() {
      // window.location.href = "https://ssy.13yu.com/index.php/Admin/Excel/getStockexport?type_no="+this.form.type_no
      // window.open(
      //   "https://ssy.13yu.com/index.php/Admin/Excel/getStockexport?type_no=" +
      //     this.form.type_no +
      //     "&batch_date=" +
      //     this.batch_date
      // );
      // postAdminExcelGetStockexport(obj).then(res=>{
      //   console.log("res--->",res);
      // })

      let obj = {
        type_no: this.form.type_no,
      };
      try {
        postAdminExcelCreate_excel_task(obj);
        this.$alert("稍后请前往 导出任列表 查看", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      } catch (error) {}
    },
    handleClose() {
      this.type_no = "";
      this.detaillist = [];
      this.date = "";
      this.auditdialogVisibleBatch = false;
      this.anticipateddialogVisibleBatch = false;
    },
    onChangeTypeNo() {
      let type_no = this.type_no;
      if (type_no) {
        let obj = {
          type_no,
        };
        postAdminOperateGetskuproportion(obj).then((res) => {
          this.detaillist = res.data;
          this.isSubmit = false;
        });
      }
    },
    // 批量平台比例弹窗
    onBatchProportion() {
      this.auditdialogVisibleBatch = true;
    },
    // 平台列表
    postAdminAdminOperateGet_platform_site() {
      postAdminAdminOperateGet_platform_site().then((res) => {
        console.log("平台列表---->", res);
        let arr = [];
        res.data.forEach((e) => {
          let obj = {
            site_id: e.id,
            proportion: "",
            title: e.title,
          };
          arr.push(obj);
        });
        this.detaillist = arr;
      });
    },
    onUpdate() {
      // this.loading = true;
      let form = this.form;
      postAdminOperateSet_amount_data().then((res) => {});
      this.$message.success("请三分钟以后刷新页面");
    },
    onSubmitBatchAnticipated() {
      let obj = {
        type_no: this.type_no,
      };
      postAdminAdminOperateVerificationTypeno(obj).then((res) => {
        obj.data = this.date;
        postAdminAdminOperateSetArrivalDate(obj).then((res) => {
          this.postAdminOperateGetamountdata(this.form);
          this.$message.success("编辑成功");
          this.anticipateddialogVisibleBatch = false;
        });
      });
    },
    onSubmit() {
      let detaillist = JSON.parse(JSON.stringify(this.detaillist));
      detaillist.forEach((element) => {
        delete element.createtime;
        delete element.id;
        delete element.listorder;
        delete element.logo;
        delete element.marks;
        delete element.title;
        delete element.sku_code;
      });

      let obj = {
        sku_code: this.detail.product_code,
        data: detaillist,
      };
      postAdminOperateSetskuproportion(obj).then((res) => {
        this.$message.success("编辑成功");
        this.auditdialogVisible = false;
      });
    },
    //   批量平台比例确认
    onSubmitBatch() {
      let detaillist = JSON.parse(JSON.stringify(this.detaillist));
      detaillist.forEach((element) => {
        delete element.createtime;
        delete element.id;
        delete element.listorder;
        delete element.logo;
        delete element.marks;
        delete element.title;
        delete element.sku_code;
      });

      let obj = {
        type_no: this.type_no,
        data: detaillist,
      };
      postAdminOperateSet_type_proportion(obj).then((res) => {
        this.postAdminOperateGetamountdata(this.form);
        this.$message.success("编辑成功");
        this.auditdialogVisible = false;
      });
    },
    //   审核
    async onAudit(e) {
      this.detail = e;
      let obj = {
        sku_code: e.product_code,
      };
      await postAdminOperateGetskuproportion(obj).then((res) => {
        this.detaillist = res.data;
      });
      this.auditdialogVisible = true;
    },
    // 采购列表
    async postAdminOperateGetamountdata(data) {
      this.loading = true;
      this.form = data;
      postAdminOperateGetamountdata(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.savetime = res.savetime;
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    async startDownload() {
      let form = this.form;
      let data = JSON.parse(JSON.stringify(form));
      let arr = [];
      data.size = 1000;
      let total = this.total;
      let num = Math.ceil(total / 1000);
      for (let index = 1; index <= num; index++) {
        data.page = index;
        await postAdminOperateGetamountdata(data)
          .then((res) => {
            console.log("采购列表onFetch", res);
            arr.push(...res.data);
          })
          .catch((err) => {
            this.loading = false;
          });
        this.json_data = arr;
      }
    },
    // 搜索
    async onSearch() {
      this.form.page = 1;
      this.form.size = 20;
      await this.postAdminOperateGetamountdata(this.form);
      await this.postAdminOperateGetamountdata(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchleft {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 3px;

  .searchleft-button {
    text-align: center;
    height: 28px;
    width: 60px;
    line-height: 28px;
    background: #eee;
    color: #000;
  }
  /deep/ .el-select {
    width: 140px;
    display: inline-block;
    input {
      font-size: 12px;
      border: none;
      background: none;
    }
  }
}
.date {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  /deep/ .el-button--mini {
  }
  .date-left {
    display: flex;
    align-items: center;
    .date-left-time {
      display: flex;
      align-items: center;
      .date-left-time-button {
        border: 1px solid #ddd;
        height: 28px;
        width: 36px;
        text-align: center;
        line-height: 28px;
        border-radius: 4px;
        color: #999;
      }
      .date-left-time-list {
        display: flex;
        margin: 0 10px;
        > div {
          height: 28px;
          width: 140px;
          text-align: center;
          line-height: 28px;
          border: 1px solid #ddd;
        }
        > div:not(:nth-child(1)) {
          border-left: none;
        }
        > div:nth-child(1) {
          border-top-left-radius: 4px;
          border-end-start-radius: 4px;
        }
        > div:nth-last-child(1) {
          border-top-right-radius: 4px;
          border-end-end-radius: 4px;
        }
      }
    }
  }
}
.borderSelect {
  border: 1px solid #2e71d6 !important;
  background: rgba(46, 113, 214, 0.1);
  color: #2e71d6;
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  font-size: 14px;
}
</style>
